<!doctype html>
<html lang="en" class="feedback">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <link rel="stylesheet" href="../css/mui.css" />
  <link rel="stylesheet" href="../css/feedback.css" />
  <link rel="stylesheet" href="../css/mui.picker.css" />
  <link rel="stylesheet" href="../css/mui.poppicker.css" />
  <link rel="stylesheet" href="../css/mui.picker.min.css" />

  <style type="text/css">
    .text-black {
      color: #444 !important;
    }
    
    .at-img-wrapper {
      display: flex;
      align-items: center;
    }
    
    .at-img-edit {
      padding: 0 !important;
      margin-left: 5px;
      margin-bottom: 0;
    }
    
    .at-ipt-edit {
      margin-bottom: 0 !important;
    }
    
    .at-tip {
      font-size: 14px;
      color: #8f8f94 !important;
    }
    
    .at-tip-active {
      font-size: 14px;
      color: #444;
    }
  </style>
</head>

<body>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发布</button>
    <h1 class="mui-title">发布任务</h1>
  </header>
  <div class="mui-content">
    <div class="mui-content-padded">
      <label for="title">
        <h4 class="mui-inline text-black">任务标题:</h4><samp class="at-tip">(必填)</samp>
      </label>
      <input class="at-ipt-edit" type="text" name="title" id="taskTitle" placeholder="给任务起个名字..." autofocus>
    </div>
    <div class="mui-content-padded">
      <label for="desc">
        <h4 class="mui-inline text-black">任务描述:</h4><samp class="at-tip">(必填)</samp>
      </label>
    </div>
    <div class="mui-content-padded mui-input-row">
      <textarea class="mui-input-clear question" name="desc" id="taskDesc" placeholder="请详细描述你的任务..." readonly></textarea>
    </div>
    <div class="mui-content-padded">
      <h4 class="mui-inline text-black">任务地点:</h4><samp class="at-tip">(必填)</samp>
      <div class="mui-table-view mui-table-view-chevron mui-table-view-cell">
        <a id="addAddress" href="javascript:void(0);" class="mui-navigate-right at-tip">请选择城市</a>
      </div>
      <!-- <div id="showCitys" class="ui-alert"></div> -->
    </div>
    <div class="mui-content-padded">
      <h4 class="mui-inline text-black">详细地址:</h4><samp class="at-tip">(必填)</samp>
      <input class="at-ipt-edit" type="text" id="taskAddrDesc" placeholder="输入详细地址..." readonly>
    </div>
    <div class="mui-content-padded">
      <h4 class="mui-inline text-black">任务开始时间:</h4><samp class="at-tip">(必填)</samp>
      <div class="mui-table-view mui-table-view-chevron mui-table-view-cell">
        <a id="selectSartTime" href="javascript:void(0);" class="mui-navigate-right at-tip selectTime" data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}'
          data-flag="start">添加任务开始时间</a>
      </div>
    </div>
    <div class="mui-content-padded">
      <h4 class="mui-inline text-black">任务终止时间:</h4><samp class="at-tip">(必填)</samp>
      <div class="mui-table-view mui-table-view-chevron mui-table-view-cell">
        <a id="selectEndTime" href="javascript:void(0);" class="mui-navigate-right at-tip selectTime" data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}'
          data-flag="end">添加任务结束时间</a>
      </div>
    </div>
    <div class="mui-content-padded at-img-wrapper">
      <h4 class="mui-inline text-black">任务照片:</h4>
      <p class="at-img-edit">图片(选填,提供问题截图,总大小10M以下)</p>
    </div>
    <div id='image-list' class="row image-list"></div>
    <div class="mui-content-padded">
      <h4 class="mui-inline text-black">任务金额:</h4><samp class="at-tip">(必填)</samp>
      <input class="at-ipt-edit" type="number" id="taskAmount" placeholder="输入金额..." readonly>
    </div>
  </div>
</body>
<script src="../js/mui.js"></script>
<!-- <script src=" ../js/feedback.js"></script> -->
<script src="../js/mui.picker.js"></script>
<!-- <script src="../js/mui.picker.min.js"></script> -->
<script src="../js/mui.poppicker.js"></script>
<script src="../js/mui.dtpicker.js"></script>
<script src="../js/city.data-3.js"></script>
<script src="../js/app.js"></script>
<script src="../js/http.js"></script>
<script type="text/javascript">
  (function($, doc) {
    $.init();
    /**
     * 获取对象属性的值
     * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
     * @param {Object} obj 对象
     * @param {String} param 属性名
     */
    function _getParam(obj, param) {
      return obj[param] || '';
    };

    var curAddress = JSON.parse(localStorage.getItem('$baiduAddress')),
      taskTitleEle = doc.getElementById('taskTitle'),
      taskDescEle = doc.getElementById('taskDesc'),
      showCityPickerButton = doc.getElementById('addAddress'),
      taskAddrDescEle = doc.getElementById('taskAddrDesc'),
      selectSartTime = doc.getElementById('selectSartTime'),
      selectEndTime = doc.getElementById('selectEndTime'),
      taskAmountEle = doc.getElementById('taskAmount'),
      taskSubmitEle = doc.getElementById('submit'),
      taskInfo = {},
      cityPicker3 = new $.PopPicker({
        layer: 3
      });

    cityPicker3.setData(cityData3);

    // taskTitleEle.addEventListener('change', getTitleVal, false);
    taskTitleEle.addEventListener('input', getTitleVal, false);
    taskDescEle.addEventListener('tap', noTitleTip, false);
    showCityPickerButton.addEventListener('tap', noDescTip, false);
    taskAddrDescEle.addEventListener('tap', unselectedTip0, false);
    selectSartTime.addEventListener('tap', unselectedTip1, false);
    selectEndTime.addEventListener('tap', unselectedTip2, false);
    taskAmountEle.addEventListener('tap', noEndTimeTip, false);
    taskSubmitEle.addEventListener('tap', noAmountTip, false);

    // taskSubmitEle.addEventListener('tap', submitTaskInfo, false);

    
    // 手机定位的地址显示到地址栏
    if (curAddress) {
      showCityPickerButton.innerText = curAddress.province + "· " + curAddress.city + "· " + curAddress.district;
      taskAddrDescEle.value = curAddress.street + "· " + curAddress.streetNumber;

      showCityPickerButton.removeEventListener('tap', noDescTip, false);
      selectCityVal();

      taskAddrDescEle.removeEventListener('tap', unselectedTip0);
      taskAddrDescEle.removeAttribute('readonly');
      taskAddrDescEle.addEventListener('input', getAddrDescVal, false);
      showCityPickerButton.className = 'mui-navigate-right at-tip-active';
    }

    if (taskTitleEle.value) {
      taskDescEle.removeEventListener('tap', noTitleTip, false);
      taskDescEle.removeAttribute('readonly');
      taskDescEle.addEventListener('input', getDescVal, false);
      // taskTitleEle.addEventListener('input', getTitleVal, false);
    }

    if (taskDescEle.value) {
      taskDescEle.removeEventListener('tap', noTitleTip, false);
      taskDescEle.removeAttribute('readonly');
      taskDescEle.addEventListener('input', getDescVal, false);

      showCityPickerButton.removeEventListener('tap', noDescTip, false);
      selectCityVal();
    }

    if (taskAddrDescEle.value) {
      taskAddrDescEle.removeEventListener('tap', unselectedTip0);
      taskAddrDescEle.removeAttribute('readonly');
      taskAddrDescEle.addEventListener('input', getAddrDescVal, false);
      showCityPickerButton.className = 'mui-navigate-right at-tip-active';

      selectSartTime.removeEventListener('tap', unselectedTip1);
      selectSartTime.addEventListener('tap', selectTime.bind(selectSartTime, selectSartTime), false);
    }

    if (taskAmountEle.value) {
      taskAmountEle.removeEventListener('tap', noEndTimeTip, false);
      taskAmountEle.removeAttribute('readonly');
      taskAmountEle.addEventListener('input', getAmountVal, false);
    }

    // selectCityVal();

    function selectCityVal() {
      showCityPickerButton.addEventListener('tap', function(event) {
        cityPicker3.show(function(items) {
          var selectCity = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
          taskInfo.address = selectCity;
          showCityPickerButton.innerText = selectCity;
          taskAddrDescEle.removeEventListener('tap', unselectedTip0);
          taskAddrDescEle.removeAttribute('readonly');
          taskAddrDescEle.addEventListener('input', getAddrDescVal, false);
          showCityPickerButton.className = 'mui-navigate-right at-tip-active';
          /* selectSartTime.removeEventListener('tap', unselectedTip1);
          selectSartTime.addEventListener('tap', selectTime.bind(selectSartTime, selectSartTime), false); */

          //返回 false 可以阻止选择框的关闭
          //return false;
        });
      }, false);

    }

    var toggleSubmit = 'on';

    function submitTaskInfo() {
      if (toggleSubmit === 'off') return;
      taskInfo.address += taskInfo.detail;
      delete taskInfo.detail;
      taskInfo.order_no = app.createOrderNo();
      http.postToken({
        // url: API.postAddTaskP,
        url: API.postAddTask,
        data: taskInfo,
        token: $state.token,
        deviceType: app.clientType.versions.android ? 'android' : 'iphone',
        success: function(res) {
          console.log('res-->>', res);
          mui.toast('发布成功');

          // TODO: 支付页面
          var taskInfoStr = JSON.stringify(taskInfo);
          localStorage.setItem('$taskInfo', taskInfoStr);
          location.href = './pay.html?title=' + document.querySelector('.mui-title').innerText;

          // if (res.code === 200) history.back();
        },
        error: function(err) {
          console.log('请求失败');
        }
      });
      toggleSubmit = 'off';
    }

    function getAmountVal() {
      taskInfo.amount = this.value;
      if (!this.value) {
        return $.toast('金额不能为零或空');
      }

      taskSubmitEle.removeEventListener('tap', noAmountTip);
      taskSubmitEle.addEventListener('tap', submitTaskInfo, false);
    }

    var toggleAddr = 'on';

    function getAddrDescVal() {
      taskInfo.detail = this.value;
      if (taskInfo.address) {
        if (toggleAddr === 'off') return;
        selectSartTime.removeEventListener('tap', unselectedTip1);
        selectSartTime.addEventListener('tap', selectTime.bind(selectSartTime, selectSartTime), false);
        toggleAddr = 'off';
      }
    }

    var toggleDesc = 'on';

    function getDescVal() {
      taskInfo.describe = this.value;
      if (taskInfo.describe) {
        if (toggleDesc === 'off') return;
        showCityPickerButton.removeEventListener('tap', noDescTip, false);
        selectCityVal();
        toggleTitle = 'off';
      }
    }

    var toggleTitle = 'on';

    function getTitleVal() {
      taskInfo.title = this.value;
      if (taskInfo.title) {
        if (toggleTitle === 'off') return;
        taskDescEle.removeEventListener('tap', noTitleTip, false);
        taskDescEle.removeAttribute('readonly');
        taskDescEle.addEventListener('input', getDescVal, false);
        toggleTitle = 'off';
      }
    }

    /* function unselectedTip(tip) {
      $.toast(tip);
    } */

    function noEndTimeTip() {
      $.toast('未添加任务结束时间');
    }

    function noDescTip() {
      $.toast('未填写任务描述');
    }

    function noTitleTip() {
      $.toast('未填写任务标题');
    }

    function unselectedTip0() {
      $.toast('请先选择城市');
    }

    function unselectedTip1() {
      $.toast('请填写详细地址');
    }

    function unselectedTip2() {
      $.toast('添加任务开始时间');
    }
    
    function noAmountTip() {
      $.toast('金额不能为零或空');
    }

    var startRs = {};

    function selectTime(value) {
      var _self = this,
        flag = this.getAttribute('data-flag');

      if (_self.picker) {
        _self.picker.show(function(rs) {
          /* if (flag === 'start') {
            startRs = rs;
            value.innerText = rs.text;
            value.className = 'mui-navigate-right at-tip-active';
            selectEndTime.removeEventListener('tap', unselectedTip2);
            selectEndTime.addEventListener('tap', selectTime.bind(selectEndTime, selectEndTime), false);
          }

          if (flag === 'end') {
            if (rs.y.value <= startRs.y.value || rs.m.value <= startRs.m.value || rs.d.value <= startRs.d.value) {
              $.toast('结束时间不能小于开始时间');
              return false;
            }
          } */

          value.innerText = rs.text;
          value.className = 'mui-navigate-right at-tip-active';

          if (flag === 'start') {
            taskInfo.start_time = rs.text;
            selectEndTime.removeEventListener('tap', unselectedTip2);
            selectEndTime.addEventListener('tap', selectTime.bind(selectEndTime, selectEndTime), false);
          }

          if (flag === 'end') {
            taskInfo.end_time = rs.text;
            taskAmountEle.removeEventListener('tap', noEndTimeTip, false);
            taskAmountEle.removeAttribute('readonly');
            taskAmountEle.addEventListener('input', getAmountVal, false);
          }

          _self.picker.dispose();
          _self.picker = null;
        });
      } else {
        var optionsJson = this.getAttribute('data-options') || '{}',
          options = JSON.parse(optionsJson),
          id = this.getAttribute('id');
        // flag = this.getAttribute('data-flag');
        /*
         * 首次显示时实例化组件
         * 示例为了简洁，将 options 放在了按钮的 dom 上
         * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
         */
        _self.picker = new $.DtPicker(options);
        _self.picker.show(function(rs) {
          /*
           * rs.value 拼合后的 value
           * rs.text 拼合后的 text
           * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
           * rs.m 月，用法同年
           * rs.d 日，用法同年
           * rs.h 时，用法同年
           * rs.i 分（minutes 的第二个字母），用法同年
           */
          value.innerText = rs.text;
          value.className = 'mui-navigate-right at-tip-active';

          if (flag === 'start') {
            taskInfo.start_time = rs.text;
            selectEndTime.removeEventListener('tap', unselectedTip2);
            selectEndTime.addEventListener('tap', selectTime.bind(selectEndTime, selectEndTime), false);
          }

          if (flag === 'end') {
            taskInfo.end_time = rs.text;
            taskAmountEle.removeEventListener('tap', noEndTimeTip, false);
            taskAmountEle.removeAttribute('readonly');
            taskAmountEle.addEventListener('input', getAmountVal, false);
          }

          /* 
           * 返回 false 可以阻止选择框的关闭
           * return false;
           */
          /*
           * 释放组件资源，释放后将将不能再操作组件
           * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
           * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
           * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
           */
          _self.picker.dispose();
          _self.picker = null;
        });
      }

    }
  })(mui, document);
</script>

</html>